<template>
    <view class="item c-flex_column" @click="tapItem">
        <view class="content c-flex_row c-position_relative">
            <image class="avater avater-absolute c-position_absolute" :src="lesson.picture" mode="aspectFill"></image>
            <view class="avater avater-relative c-position_relative"></view>
            <view class="info c-flex_column c-flex_1">
                <view class="c-flex_row c-align_center c-justify_between">
                    <view class="name">
                        {{lesson.name}} <text class="count" v-if='showUnit'>{{lesson.articleCount}}<text
                                class="unit">unit</text></text>
                    </view>
                    <uni-icons custom-prefix="iconfont" type="icon-e-zhankai" size="20" color="#fff"></uni-icons>
                </view>
                <view class="c-flex_row c-align_center c-justify_between">
                    <view class="unit-count">
                        {{lesson.articleCount}}
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            lesson: {
                type: Object,
                default: function() {
                    return null;
                }
            }
        },
        data: function() {
            return {}
        },
        computed: {
            showUnit() {
                return this.lesson && this.lesson.articleCount
            },
        },
        methods: {
            tapItem() {
                this.$emit("tapItem", this.lesson);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .item {
        border-radius: 10rpx;
        box-shadow: 0 0 20rpx #d2e3fd;

        .content {
            background: #FECF02;
            border-radius: 15rpx;

            .avater {
                width: 150rpx;
                height: 200rpx;
                border-radius: 15rpx;
                background: #fff;
            }

            .avater-absolute {
                left: 50rpx;
                top: -50rpx;
                box-shadow: 0 0 10rpx #d2e3fd;
                z-index: 2;
            }

            .avater-relative {
                margin-left: 50rpx;
                background: transparent;
            }

            .info {
                padding: 25rpx;

                .name {
                    font-size: 36rpx;
                    color: #333;
                    font-weight: 700;
                }

                .unit-count {
                    margin-top: 20rpx;
                    font-size: 32rpx;
                    color: #dd524d;
                    font-weight: 700;
                }

                .unit-count::before {
                    content: "章节数：";
                    font-size: 24rpx;
                    color: #333;
                }
            }
        }
    }
</style>